<template>
  <div>
    <!--      height="380px"-->
    <Echart
      :id="id"
      :options="options"
      height="420px"
      width="100%"
    />
  </div>
</template>

<script>
// import * as echarts from "echarts";
import Echart from '@/common/echart'
const schema = [
  {name: 'defleixing', index: 0, text: '缺陷类型'},
  {name: 'timeDealX', index: 1, text: '时间'},
  {name: 'type', index: 2, text: '缺陷大小'},
  {name: 'XposDeal', index: 3, text: '缺陷位置'},
  {name: 'time', index: 4, text: '时间'},
  {name: 'encodernum', index: 5, text: '序号'},
  {name: 'typeDeal', index: 6, text: '缺陷大小'},
  {name: 'lineNum', index: 7, text: '线号'}
]
const itemStyle = {
  opacity: 0.8,
  shadowBlur: 3,
  shadowOffsetX: 0,
  shadowOffsetY: 0,
  shadowColor: 'rgba(0,0,0,0.3)'
}
// todo symbolSize 缺陷图示大小
const symbolSize = 4

export default {
  components: {
    Echart
  },
  props: {
    cdata: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      chart: null,
      options: {},
      id: 'bottomLeftChart',
      range: [0, 10] // 缺陷分级
    }
  },
  watch: {
    cdata: {
      handler(newData) {
        console.log('newData', newData)
        this.options = {
          title: {
            show: false,
            text: 'DefNum：' + newData.dataDerRevNum,
            // text: '缺陷总数：' + this.cdata.length,
            textStyle: {
              fontWeight: 'normal',
              fontSize: 12,
              color: '#B4B4B4'
            },
            left: '80%',
            top: '75%'
          },
          color: ['#dd4444', '#fec42c', '#80F1BE', '#4a81f1',
            '#F1935C', '#fee7ea', '#dd4444', '#fec42c'],
          dataset: [
            {
              source: newData.stoneArr
            },
            {
              source: newData.longBubbleArr
            },
            {
              source: newData.roundBubbleArr
            },
            {
              source: newData.sundriesArr
            },
            {
              source: newData.upperOpeningBubbleArr
            },
            {
              source: newData.bottomOpeningBubbleArr
            },
            {
              source: newData.pressureRollerLineArr
            },
            {
              source: newData.otherArr
            }
          ],
          // singleAxis
          tooltip: {
            borderWidth: 0,
            backgroundColor: 'rgba(50,50,50,0.5)',
            textStyle: {
              color: '#FFF'
            },
            axisPointer: {
              type: 'cross',
              crossStyle: {
                color: '#008acd'
              },
              shadowStyle: {
                color: 'rgba(200,200,200,0.2)'
              }
            },
            trigger: 'item',
            shadowBlur: 10,
            shadowColor: 'rgba(0, 0, 0, .2)',
            shadowOffsetX: 1,
            shadowOffsetY: 2,
            extraCssText: '',
            // padding: [5, 10],
            formatter: function(param) {
              const value = param.dimensionNames
              // console.log(value);
              // prettier-ignore
              return '<div style="border-bottom: 1px solid rgba(255,255,255,.3); font-size: 18px;padding-bottom: 7px;margin-bottom: 7px">' +
                          param.value['lineNum'] + '线 ' + schema[0].text + '：' + param.seriesName + ' ' + '<br>' +
                          param.value['timeDealX'] + '</div>' +
                          schema[2].text + '：' + param.value['type'] + '<br>' +
                          schema[3].text + '：' + param.value['XposDeal'] + '<br>'
            }
          },
          legend: {
            top: 10,
            left: 40,
            // data: ['Stones', 'Bubble', 'Others', 'Knots', '9'],
            data: ['结石', '长泡', '圆泡', '杂物', '上开口泡', '下开口泡', '压辊线', '其他'],
            textStyle: {
              fontSize: 12
            }
          },
          grid: {
            left: 40,
            right: 40,
            top: 40,
            bottom: 40,
            show: true,
            // backgroundColor: 'rgba(0, 138, 205, .3)',
            backgroundColor: 'rgba(183, 225, 247, .7)',
            // backgroundColor: 'rgba(183, 225, 247, .5)',
            containLabel: true
          },
          xAxis: {
            type: 'time',
            name: '',
            nameGap: 16,
            nameTextStyle: {
              fontSize: 16
            },
            axisLine: {
              lineStyle: {
                color: '#008acd'
              }
            },
            axisLabel: {
              show: false
            },
            axisTick: {
              // show:false
              inside: true
            },
            scale: true,
            boundaryGap: ['1%', '1%'],
            splitLine: {
              show: false
            }
          },
          yAxis: {
            // min: 0,
            // max: 3000,
            type: 'value',
            name: '',
            nameLocation: 'end',
            nameGap: 20,
            nameTextStyle: {
              fontSize: 16
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#008acd'
              }
            },
            axisLabel: {show: false},
            axisTick: {show: false},
            splitLine: {
              show: false
            }
          },
          series: [
            {
              name: '结石',
              // name: 'Stones',
              datasetIndex: 0,
              type: 'scatter',
              itemStyle: itemStyle,
              symbol: 'pin',
              symbolSize: symbolSize,
              // symbol:'triangle',
              // symbol:'diamond',
              encode: {
                x: 'timeDealX',
                y: 'XposDeal'
              }
            },
            {
              // name: 'Bubble',
              name: '长泡',
              datasetIndex: 1,
              type: 'scatter',
              itemStyle: itemStyle,
              symbolSize: symbolSize,
              encode: {
                x: 'timeDealX',
                y: 'XposDeal'
              }
            },
            {
              name: '圆泡',
              datasetIndex: 2,
              type: 'scatter',
              itemStyle: itemStyle,
              symbolSize: symbolSize,
              encode: {
                x: 'timeDealX',
                y: 'XposDeal'
              }
            },
            {
              name: '杂物',
              datasetIndex: 3,
              type: 'scatter',
              itemStyle: itemStyle,
              symbolSize: symbolSize,
              symbol: 'triangle',
              encode: {
                x: 'timeDealX',
                y: 'XposDeal'
              }
            },
            {
              name: '上开口泡',
              // name: 'Others',
              datasetIndex: 4,
              type: 'scatter',
              itemStyle: itemStyle,
              symbolSize: symbolSize,
              symbol: 'diamond',
              encode: {
                x: 'timeDealX',
                y: 'XposDeal'
              }
            },
            {
              // name: 'Knots',
              name: '下开口泡',
              datasetIndex: 5,
              type: 'scatter',
              itemStyle: itemStyle,
              symbolSize: symbolSize,
              encode: {
                x: 'timeDealX',
                y: 'XposDeal'
              }
            },
            {
              // name: '9',
              name: '压辊线',
              datasetIndex: 6,
              type: 'scatter',
              itemStyle: itemStyle,
              symbolSize: symbolSize,
              encode: {
                x: 'timeDealX',
                y: 'XposDeal'
              }
            },
            {
              // name: '9',
              name: '其他',
              datasetIndex: 7,
              type: 'scatter',
              itemStyle: itemStyle,
              symbolSize: symbolSize,
              encode: {
                x: 'timeDealX',
                y: 'XposDeal'
              }
            }
          ]
        }
      },
      immediate: true,
      deep: true
    }
  },
  mounted() {
    // this.$nextTick(() => {
    //   // this.initChart()
    // })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
  }
}
</script>

<style lang="scss" scoped>
  .sliderRange {
    z-index: 10;
    position: absolute;
    margin-left: 540px;
    margin-top: 80px
  }
</style>
